<template>
  <div class="switch" @click="toggleValue" :class="{ selected: enabled }">
    <div class="wrapper">
      <div class="bullet"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["enabled"],
  methods: {
    toggleValue() {
      this.$emit("update:enabled", !this.enabled);
      this.$emit("change", !this.enabled);
    },
  },
};
</script>

<style lang="scss" scoped>
.switch {
  display: inline-block;
  user-select: none;
}
.switch:active .bullet {
  transform: scale(0.8);
}
.wrapper {
  width: 32px;
  height: 16px;
  border-radius: 8px;
  background: #e0f8ed;
  transition: background 0.3s;
  padding: 1px;
  box-sizing: border-box;
}
.bullet {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2c3e50;
  transition: margin-left 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.selected > .wrapper {
  background: #42b983;
}
.selected > .wrapper > .bullet {
  margin-left: 16px;
  background: #fff;
}
</style>
